<template>
  <view v-if="visible" class="toast-container">
	 <view class="container">
    <view class="toast">{{ message }}</view><input type="text" style="width: 200px;"></input>
	 <!-- <view class="modal-body">
	 	  
	 	  <view class="input-box" >
	 	  <span class="modal-text">订单号</span><input disabled  type="text" style="text-align: left;margin-left: 10px;" v-model="inputValue"/>
	 	  </view>
	 	  <view class="input-box" >
	 	  <span class="modal-text">客户名称</span><input type="text" style="text-align: left;margin-left: 10px;" v-model="periodValue"/>
	 	  </view>
		  <view class="input-box" >
	 	  <span class="modal-text">下单时间</span><input disabled type="text"  style="text-align: left;margin-left: 10px;" v-model="textareaContent"/>
		   </view>
		  <view class="input-box">
		      <span class="modal-text">出车时间</span>
		      <picker mode="date" :value="selectedDate" @change="onDateChange">
		        <view class="picker">
		          {{ selectedDate }}
		        </view>
		      </picker>
		    </view>
		 <view class="input-box" >
		 <span class="modal-text">车号</span>
		 <picker mode="selector" :range="trainNumbers" :value="selectedTrainNumber" @change="onTrainNumberChange">
		       <view class="picker">
		        {{ selectedTrainNumber|| '请选择车号' }}
		       </view>
		     </picker>
		  </view>
		  <view class="input-box" >
		  <span class="modal-text">司机姓名</span><input type="text"  style="text-align: left;margin-left: 10px;" v-model="pilot"/>
		   </view>
		   <view class="input-box" >
		   <span class="modal-text">车费</span><input type="text"  style="text-align: left;margin-left: 10px;" v-model="carFare"/>
		    </view>
			<view class="input-box" >
			<span class="modal-text">结款状态</span>
			<picker mode="selector" :range="settlementTab" :value="selectedTitle" @change="onTrainsettlementChange">
			      <view class="picker">
			       {{ selectedTitle}}
			      </view>
			    </picker>
			 </view>
	 	 <view class="modal-footer">
	 	 		  <span @click="closeShow" class="quxiao" >取消</span><span class="yuyue" @click="addCilck">确定</span>
	 	 </view>
	 </view> -->
	 <view class="modal-footer">
	 		  <span @click="closeShow" class="quxiao" >取消</span><span class="yuyue" @click="addCilck">确定</span>
	 </view>
	<!-- <view class="modal-footer">
		<span @click="closeShow" class="quxiao" >取消</span><span class="yuyue" @click="addCilck">提货</span>
	</view> -->
  </view>
  </view>
</template>

<script>
		import {signUp} from '@/api/sign.js';
		import {getDetails} from '@/api/appointment.js';
export default {
  data() {
    return {
      visible: false,
      message: '',
	  ids:[],
	  images: [] ,// 存储选中的图片路径,
	  items:{
		  dtos:[]
	  },
	  req:{},
	  picture:[],//存储后的路径
	  pictureString:'',
	  imageUrl:'',
	  textareValue:'',
	  inputValue:0,
	  periodValue:0,
	  settlementTab:[
		  '未结款',
		  '已结款'
	  ],
	  selectedTitle:'未结款',
	  textareaContent:0,
	  settlementStatus:0,
	 selectedDate: '请选择日期', // 初始选中的日期，格式为"YYYY-MM-DD"
	 formattedDate: '请选择日期', // 显示的日期文本，默认为提示信息
	selectedTrainNumberIndex: 0, // 用户选中的车号索引
	 trainNumbers: [
		 
	 ],
	 selectedTrainNumber: '请选择车号' ,// 用户选中的车号（根据索引动态设置）
	 trainNumberFields:[],
	 pilot:'',
	 carFare:'',
	 pilotPhone:'',
    };
  },
   watch: {
      // 监听selectedDate的变化，并更新formattedDate
      selectedDate(newVal) {
        this.formattedDate = newVal ? newVal : '请选择日期';
      }
    },
  props: {
  	 workId: {
  		 type: Number,
  		 required: true
  	 },
	 waybillNumber:{
		 type: String,
		 required: true
	 }
      },
	watch: {
		
	    workId(newVal, oldVal) {
	  //     // 当 someProp 更新时执行的逻辑
		 //  getId({id: this.workId}).then(res =>{
		 //  	this.items=res.data.data
		 //  	this.inputValue=this.items.code
			// this.periodValue=this.items.factoryName
			// this.textareaContent=this.formatDate(this.items.orderTime);
		 //  }).catch((error) => {
		 //  });
	    },
		selectedTrainNumberIndex(newVal,oldVal) {
		      this.selectedTrainNumber = this.trainNumbers[newVal];
			  const selectedTrainObject = this.trainNumberFields[newVal];
			   // 假设每个对象都有一个carCode属性（您需要根据实际情况调整）
			   if (selectedTrainObject) {
			     this.selectedTrainNumber = selectedTrainObject.carCode;
				  this.pilot = selectedTrainObject.pilot;// 更新选中的车号（假设是carCode）
				  this.pilotPhone=selectedTrainObject.pilotPhone;
			   } else {
			     this.selectedTrainNumber = null; // 或者设置为默认值，比如'请选择车号'（但注意这与之前的类型不一致）
			   }
		    }
	  },
	mounted(){
		this.fetchTrainNumbers();
	},
  methods: {
	  onTrainsettlementChange(e){
	  	 this.selectedTitle = this.settlementTab[e.detail.value] 
		 this.settlementStatus = e.detail.value;
	  },
	  formatDate(dateStr) {
	      const date = new Date(dateStr);
	      // 提取年、月、日、小时、分钟和秒
	      const year = date.getFullYear();
	      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1，并且用padStart来确保始终是两位数
	      const day = String(date.getDate()).padStart(2, '0'); // 同上，用padStart来确保始终是两位数
	      const hours = String(date.getHours()).padStart(2, '0');
	      const minutes = String(date.getMinutes()).padStart(2, '0');
	      const seconds = String(date.getSeconds()).padStart(2, '0');
	      
	      // 返回格式化后的日期字符串
	      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	    },
	  fetchTrainNumbers() {
		  
	     
	      },
	  onTrainNumberChange(e) {
		    // 将每个对象的 trainNumber 字段添加到新数组中
		   this.selectedTrainNumberIndex = e.detail.value;
	        // 注意：由于我们在watch中已经监听了selectedTrainNumberIndex的变化，
	        // 因此这里不需要再次设置selectedTrainNumber。
	      },
    // show(msg, duration = 2000) {
    //   this.message = msg;
    //   this.visible = true;
    //   setTimeout(() => {
    //     this.visible = false;
    //   }, duration);
    // }
	show(msg) {
	  this.message = msg;
	  this.visible = true;
	  this.pilot='';
	  this.pilotPhone='';
	  this.selectedTrainNumber='';
	  this.carFare='';
	   this.formattedDate='';
	},
	onDateChange(e) {
	      // 用户选择日期后触发的方法
	      this.selectedDate = e.detail.value;
	      // 注意：由于我们在watch中已经监听了selectedDate的变化，
	      // 因此这里不需要再次设置formattedDate。
	    },
	addCilck(){
		 signUp({wordId:this.workId,type:2}).then(res =>{
		 	this.visible = false;
			this.$emit('add-item', 1);
		 uni.showToast({
		 	        title: '提货成功',
		 	        icon: 'success',
		 	    });
		 }).catch((error) => {
		     // 请求失败
		     console.error('提货失败', error);
		     uni.showToast({
		         title: '提货失败，请重试',
		         icon: 'none',
		     });
		 });
		this.visible = false;
	},
	closeShow(){
		this.visible = false;
	}
  }
};
</script>

<style scoped>
	.picker {
	  width: 150px; /* 根据需求调整宽度 */
	  height: 40px; /* 根据需求调整高度 */
	  line-height: 40px;
	  border: none;
	  border-radius: 4px;
	  text-align: center;
	}
	.photo-box{
		margin-top: 20px;
		display: flex;
		align-items: center;
		border-radius: 4px;
		padding: 10px;
		text-align: center;
		box-sizing: border-box;
		flex: 1;
		height: 50px;
		margin-top: 10px;
		border: none;
		outline: none;
	}
	.photo-icon{
		margin-left: 2px;
		margin-top: 14px;
		width: 40px;
		height: 40px;
	}
	.photo{
		margin-left: 30px;
		width: 70px;
		height: 70px;
		display: inline-block;
		border: 1.5px dashed #ccc;
	}
	.image-item{
		display: inline-block;
		margin-left: 20px;
		margin-top: 30px;
	}
	.photo-text{
		margin-left: 10px;
		margin-right: 5px;
		color: black;
		font-size: 14px;
	}
.input-box {
  display: flex;
  align-items: center;
  background-color: #ebebeb;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  flex: 1;
  height: 50px;
  margin-top: 10px;
  border: none;
  outline: none;
}
.modal-text{
	font-size: 14px;
	margin-left: 10px;
	text-align: left;
	line-height: 30px;
	color: #ccc;
}
.modal-body {
  margin-bottom: 15px;
  height: 250px;
}
.toast-container {
  position: fixed;
	top: 0%;
	left: 0%;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  
}
.container{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 100px;
	transform: translate(-50%, -50%);
	justify-content: center;
	align-items: center;
	background-color: #fff;
	color: black;
	text-align: center;
	border-radius: 5px;
	padding: 10px 20px;
}

.toast {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  top: 20px;
}
.modal-footer {
  display: flex;
  justify-content: space-around;
  position: relative;
  top: 28px;
  border-top: 1px solid #ccc;
}
.yuyue{
	color: #ffaa00;
	font-weight: bold;
	border-left: 1px solid #ccc;
	display: inline-block;
	height: 38px;
	line-height: 40px;
	width: 150px;
	font-size: 15px;
	position: relative;
	left: 30px;
}
.quxiao{
	text-align: center;
	margin-top: 10px;
	margin-left: 30px;
	font-size: 15px;
}
</style>